@page "/Column_Chart"
@inject NavigationManager NavigationManager
@inject HttpClient HttpClient

<Tabs>
    <TabPane Key="1" Tab="Sample 1">
        <AntDesign.Charts.Column Data=data1 Config="config1" />
    </TabPane>
    <TabPane Key="2" Tab="Sample 2">
        <AntDesign.Charts.Column Data=data1 Config="config2" />
    </TabPane>
    <TabPane Key="3" Tab="Sample 3">
        <AntDesign.Charts.Column Data=data1 Config="config3" />
    </TabPane>
    <TabPane Key="4" Tab="Sample 4">
        <AntDesign.Charts.Column Data=data1 Config="config4" />
    </TabPane>
    <TabPane Key="5" Tab="Sample 5">
        <AntDesign.Charts.Column Data=data5 Config="config5" />
    </TabPane>
    <TabPane Key="6" Tab="Sample 6">
        <AntDesign.Charts.Column Data=data5 Config="config6" />
    </TabPane>
    <TabPane Key="7" Tab="Sample 7">
        <AntDesign.Charts.Column Data=data7 Config="config7" />
    </TabPane>
</Tabs>

<Divider>动手实验</Divider>
<DynamicExample @ref="@example">
    <AntDesign.Charts.Column @ref="@chart" />
</DynamicExample>

@code{

    public IChartComponent chart;
    DynamicExample example;

    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);
        example.Chart = chart;
    }


    #region 示例1

    object[] data1 = new object[]
    {
        new
        {
            type = "家具家电",
            sales = 38,
        },
        new
        {
            type = "粮油副食",
            sales = 52,
        },
        new
        {
            type = "生鲜水果",
            sales = 61,
        },
        new
        {
            type = "美容洗护",
            sales = 145,
        },
        new
        {
            type = "母婴用品",
            sales = 48,
        },
        new
        {
            type = "进口食品",
            sales = 38,
        },
        new
        {
            type = "食品饮料",
            sales = 38,
        },
        new
        {
            type = "家庭清洁",
            sales = 38,
        },
    };
    ColumnConfig config1 = new ColumnConfig()
    {
        Padding = "auto",
        XField = "type",
        YField = "sales",
        Meta = new
        {
            Type = new
            {
                Alias = "类别",
            },
            Sales = new
            {
                Alias = "销售额(万)",
            },
        },
    };
    #endregion 示例1

    #region 示例2
    ColumnConfig config2 = new ColumnConfig()
    {
        Padding = "auto",
        XField = "type",
        YField = "sales",
        Label = new ColumnViewConfigLabel()
        {
            Position = "middle",
            Style = new TextStyle()
            {
                Fill = "#FFFFFF",
                Opacity = 0.6,
            }
        },
        XAxis = new CatAxis()
        {
            Label = new BaseAxisLabel()
            {
                AutoHide = true,
                AutoRotate = false,
            }
        },
        Meta = new
        {
            Type = new
            {
                Alias = "类别",
            },
            Sales = new
            {
                Alias = "销售额(万)",
            },
        },
    };
    #endregion

    #region 示例3
    ColumnConfig config3 = new ColumnConfig()
    {
        XField = "type",
        YField = "sales",
        //todo column width ratio
        Meta = new
        {
            Type = new
            {
                Alias = "类别",
            },
            Sales = new
            {
                Alias = "销售额(万)",
            },
        },
        Label = new ColumnViewConfigLabel()
        {
            Visible = true,
            Position = "middle"
        },
    };
    #endregion

    #region 示例4
    ColumnConfig config4 = new ColumnConfig()
    {
        Padding = "auto",
        XField = "type",
        YField = "sales",
        Meta = new
        {
            Type = new
            {
                Alias = "类别",
            },
            Sales = new
            {
                Alias = "销售额(万)",
            },
        },
        ColorField = "type",
        Color = new string[] { "#55A6F3", "#55A6F3", "#55A6F3", "#CED4DE", "#55A6F3", "#55A6F3", "#55A6F3", "#55A6F3" },
        Label = new ColumnViewConfigLabel()
        {
            Visible = true,
            Position = "middle",
            AdjustColor = true,
        },
    };
    #endregion

    #region 示例5
    ColumnConfig config5 = new ColumnConfig()
    {
        Padding = "auto",
        XField = "城市",
        XAxis = new CatAxis()
        {
            Visible = true,
            Label = new BaseAxisLabel()
            {
                Visible = true,
                AutoHide = true,
            },
        },
        YAxis = new ValueAxis()
        {
            Visible = true,
        },
        YField = "销售额",
        Slider = new Slider()
        {
            Start = 0.1,
            End = 0.2
        }
    };
    #endregion

    #region 示例6
    ColumnConfig config6 = new ColumnConfig()
    {
        Padding = "auto",
        XField = "城市",
        XAxis = new CatAxis()
        {
            Visible = true,
            Label = new BaseAxisLabel()
            {
                AutoHide = true,
            },
        },
        YAxis = new ValueAxis()
        {
            Visible = true,
            Label = new BaseAxisLabel()
            {
                Visible = true,
            },
        },
        YField = "销售额",
        Scrollbar = new Scrollbar()
        {
            Type = "horizontal"
        }
    };
    #endregion


    #region 示例7
    object[] data7 = new object[]
{
        new{action = "浏览网站", pv=50000},
        new{action = "放入购物车", pv=35000},
        new{action = "生成订单", pv=25000},
        new{action = "支付订单", pv=15000},
        new{action = "完成交易", pv=8500},
        };

    ColumnConfig config7 = new ColumnConfig()
    {
        Padding = "auto",
        XField = "action",
        YField = "pv",
        ConversionTag = new ConversionTagOptions()
        {
            Visible = true,
        },
    };
    #endregion


    SalesItem[] data5;

    protected override async Task OnInitializedAsync()
    {
        data5 = await DemoData.SalesAsync(NavigationManager, HttpClient);

        await base.OnInitializedAsync();
    }

}

